<template>
	<div class="container">
		<div class="register-wrapper">
			<div style="font-size: 20px; cursor: pointer" @click="$router.go(-1)">&lt;</div>
			<div class="title-bar">
				<img class="logo" src="@/assets/oj.png" alt="" />
				<div class="title">LOJ</div>
			</div>
			<div class="header">Register</div>
			<div class="form">
				<el-form label-position="left" ref="registerForm" :model="form" label-width="auto" :rules="registerRules">
					<el-form-item prop="username" label="用户名">
						<el-input autocomplete="“off”" v-model="form.username" placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item prop="password" label="密码">
						<el-input type="password" show-password v-model="form.password" placeholder="请输入密码"></el-input>
						<div class="password-strength" v-if="pwHidden">
							<span class="strength-bar" :class="pwClasses[0]"></span>
							<span class="strength-bar" :class="pwClasses[1]"></span>
							<span class="strength-bar" :class="pwClasses[2]"></span>
							<span class="strength-text">{{ pwText }}</span>
						</div>
					</el-form-item>
					<el-form-item label="确认密码" prop="rePassword">
						<el-input type="password" show-password v-model="form.rePassword" placeholder="请再次输入密码"></el-input>
						<div class="password-strength" v-if="pwNewHidden">
							<span class="strength-bar" :class="rePwClasses[0]"></span>
							<span class="strength-bar" :class="rePwClasses[1]"></span>
							<span class="strength-bar" :class="rePwClasses[2]"></span>
							<span class="strength-text">{{ rePwText }}</span>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button :loading="loading" class="login-button" type="primary" @click="onSubmit">注册</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div v-if="showTip" class="tip">注册成功！还有 {{ time }} 秒自动跳到登录页</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import { userRegister } from "@/api/user";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const registerForm = ref();
const loading = ref(false);
const form = reactive({
	username: "",
	password: "",
	rePassword: ""
});
const registerRules = reactive({
	username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
	password: [
		{ required: true, message: "请输入密码", trigger: "blur" },
		{ min: 7, message: "密码长度不能小于7位", trigger: "blur" }
	],
	rePassword: [
		{ required: true, message: "请再次输入密码", trigger: "blur" },
		{ min: 7, message: "密码长度不能小于7位", trigger: "blur" }
	]
});

const time = ref(5);
const showTip = ref(false);

const onSubmit = async () => {
	if (!registerForm.value) return;
	if (form.rePassword !== form.password) {
		ElMessage.error("两次输入的密码不一致,请重新输入密码");
		form.password = "";
		form.rePassword = "";
		return;
	}
	await registerForm.value.validate(async valid => {
		if (valid) {
			try {
				loading.value = true;
				const res = await userRegister({
					userAccount: form.username,
					userPassword: form.password,
					checkPassword: form.rePassword
				});
				if (res.code !== 0) {
					ElMessage.error(res.message);
					registerForm.value.resetFields();
					loading.value = false;
					return;
				}
				ElMessage.success("注册成功！");
				showTip.value = true;
				loading.value = false;
				registerForm.value.resetFields();
				startCountdown();
			} catch (error) {
				console.log(error);
				loading.value = false;
				return;
			}
		}
	});
};

const startCountdown = () => {
	const interval = setInterval(() => {
		time.value--;
		if (time.value === 0) {
			clearInterval(interval);
			router.push("/user/login");
		}
	}, 1000);
};

// 定义密码强度相关变量
const pwHidden = ref(false);
const pwNewHidden = ref(false);
const pwText = ref("");
const rePwText = ref("");
const pwClasses = ref([]);
const rePwClasses = ref({});

// 密码强度判断函数
function checkPasswordStrength(password) {
	if (password.length > 7) {
		pwHidden.value = true;
		if (password.match(/^[0-9]{8,20}$|^[a-zA-Z]{1,32}$/)) {
			// 弱
			pwClasses.value = ["weak", "hidden", "hidden"];
			pwText.value = "弱";
		} else if (password.match(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,32}$/)) {
			// 中
			pwClasses.value = ["medium", "medium", "hidden"];
			pwText.value = "中";
		} else if (password.match(/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\w\s]).{8,32}$/)) {
			// 强
			pwClasses.value = ["strong", "strong", "strong"];
			pwText.value = "强";
		}
	} else {
		pwHidden.value = false;
	}
}
function checkRePasswordStrength(password) {
	if (password.length > 7) {
		pwNewHidden.value = true;
		if (password.match(/^[0-9]{8,20}$|^[a-zA-Z]{1,32}$/)) {
			// 弱
			rePwClasses.value = ["weak", "hidden", "hidden"];
			rePwText.value = "弱";
		} else if (password.match(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,32}$/)) {
			// 中
			rePwClasses.value = ["medium", "medium", "hidden"];
			rePwText.value = "中";
		} else if (password.match(/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\w\s]).{8,32}$/)) {
			// 强
			rePwClasses.value = ["strong", "strong", "strong"];
			rePwText.value = "强";
		}
	} else {
		pwNewHidden.value = false;
	}
}

// 监听密码变化
watch(
	() => form.password,
	newVal => {
		checkPasswordStrength(newVal);
	}
);

// 监听确认密码变化
watch(
	() => form.rePassword,
	newVal => {
		checkRePasswordStrength(newVal);
	}
);
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
	.register-wrapper {
		background-color: #fff;
		width: 358px;
		height: 588px;
		border-radius: 15px;
		padding: 30px 30px;
		position: relative;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		.title-bar {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 48px;
			.logo {
				height: 48px;
				margin: 0 20px;
			}
			.title {
				line-height: 48px;
			}
		}
		.header {
			margin-top: 30px;
			font-size: 30px;
			font-weight: bold;
			text-align: center;
		}
	}
	.form {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50px;
		.login-button {
			width: 100%;
			background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
			border: none;
		}
		.password-strength {
			margin-top: 15px;
			line-height: 8px;
			display: flex;
			align-items: center;
		}

		.strength-bar {
			display: inline-block;
			width: 40px;
			margin-right: 5px;
			height: 2px;
			border-radius: 1px;
		}

		.weak {
			background-color: #ff5a59; /* 弱 - 红色 */
		}

		.medium {
			background-color: #f5c12a; /* 中 - 黄色 */
		}

		.strong {
			background-color: #25c758; /* 强 - 绿色 */
		}
		.hidden {
			background-color: #ccc;
		}

		.strength-text {
			color: #666;
		}
	}
	.tip {
		text-align: center;
		width: 100%;
		a {
			text-decoration: none;
		}
		.router-link-active {
			text-decoration: none;
		}
	}
	.el-input {
		width: 250px;
	}
	:deep(.el-input__inner) {
		transition: background-color 5000s ease-in-out 0s;
	}
}
</style>
